<template>
  <div>
    <v-header></v-header>
    <div class="line"></div>
    <!--导航栏-->
    <v-menu></v-menu>
    <!--主体-->
    <div class="musicBody">
      <el-container style="margin-top: 40px" class="layout-container-demo">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <el-scrollbar>
            <el-menu :default-active="activeIndex"
                     v-for="(item,index) in musicAllList"
                     :key="index"
                     @select="handleSelect">
              <el-menu-item :index="item.rankId">{{item.rankName}}</el-menu-item>
            </el-menu>
          </el-scrollbar>
        </el-aside>
        <el-main>
          <!--榜单头部-->
          <div>
            <div style="display: inline-block;">
              <div>
                <span
                  style="font-size: 24px;font-weight:400;line-height:100%;padding: 5px;">{{musicList.rankName}}</span>
                <span style="color:#999999;font-size: 14px;margin-left: 20px">{{musicList.addTime}}</span><br>
              </div>
              <div>
                <span
                  style="color: #999999;font-size: 14px;margin-top: 20px;padding: 5px">{{musicList.intro}}</span><br>
              </div>
              <div>
                <span style="color: #999999;font-size: 14px;margin-top: 20px;padding: 5px">热度：{{musicList.playTimes/10000}}W</span>
              </div>
            </div>
          </div>
          <!-- 分割线-->
          <el-divider border-style="margin:12px"></el-divider>
          <!--音乐部分-->
          <!--音乐部分-->
          <el-table :data="musicListForType"
                    style="width: 100%"
                    v-loading="loading"
                    element-loading-text="Loading..."
                    element-loading-svg-view-box="-10, -10, 50, 50">
            <el-table-column prop="fileName" label="歌曲名" width="530"/>
            <el-table-column prop="component" width="150">
              <template slot-scope="scope">
                <el-link :underline="false" v-show="true" @click="toPlayMusic(scope.$index)"><i
                  class="iconfont icon-bofangsanjiaoxing"></i>
                </el-link>
                &nbsp;
                <el-link :underline="false" v-show="true" @click="toPlayMusicComment(scope.$index)"><i class="iconfont icon-xiaoxi"></i></el-link>
                &nbsp;
                <el-link :underline="false" v-show="true" @click="likeMusic(scope.$index)">
                  <div v-if="musicListForType[scope.$index].likeFlag === 1">
                    <i class="iconfont icon-xin2" style="color: red"></i>
                  </div>
                  <div v-else>
                    <i class="iconfont icon-xin"></i>
                  </div>
                </el-link>
                &nbsp;
              </template>
            </el-table-column>
            <el-table-column prop="timeLength" label="时长"/>
          </el-table>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>

  import header from "../layout/Header";
  import footer from "../layout/Footer";
  import menu from "../layout/Menu";

  export default {
    components: {
      'v-header': header,
      'v-footer': footer,
      'v-menu': menu
    },
    name: "MusicListV2",
    data() {
      return {
        activeIndex: '8888',
        musicAllList: [],
        musicListForType: [],
        musicList: {
          rankName: '',
          addTime: '',
          intro: '',
          playTimes: 0,
          music: []
        },
        loading: false,
        isLogin: false,
      }
    },
    mounted() {
      this.getMusicAllList();
    },
    created() {
      document.title = '榜单'
    },
    methods: {
      //跳转到评论
      toPlayMusicComment(index){
        let routeUrl = this.$router.resolve({
          path: '/playMusicComment',
          query: {
            hash: this.musicListForType[index].hash,
            albumId: this.musicListForType[index].albumId
          }
        });
        window.open(routeUrl.href, '_blank');
      },
      //添加喜欢歌曲
      likeMusic(res) {
        if (sessionStorage.getItem("token") != null) {
          this.$axios({
            method: 'post',
            url: '/user/likeMusic',
            dataType: 'json',
            crossDomain: true,
            headers: {
              Authentication: sessionStorage.getItem("token")
            },
            data: {
              hash: this.musicListForType[res].hash,
              albumId: this.musicListForType[res].albumId
            }
          }).then(res1 => {
            if (res1.data.msgCode === '-1') {
              this.$message({
                message: '登录过期，请重新登录',
                type: 'warning'
              });
              this.$router.push('/login');
            }else {
              if (this.musicListForType[res].likeFlag === 1){
                this.musicListForType[res].likeFlag = 0;
              }else {
                this.musicListForType[res].likeFlag = 1;
              }
            }
          })
        } else {
          this.$confirm('您还未登录，请先登录后添加喜欢', '提示', {
            confirmButtonText: '确定',
            type: 'info'
          }).then(() => {
            this.$router.push('/login')
          })
        }
      },
      //播放音乐
      toPlayMusic(res) {
        let routeUrl = this.$router.resolve({
          path: '/playMusic',
          query: {
            hash: this.musicListForType[res].hash,
            albumId: this.musicListForType[res].albumId
          }
        });
        this.$axios({
          method: 'post',
          url: '/redis/setMusicPlayQueue',
          data: {
            musicPlayQueue: this.musicListForType
          }
        }).then(res => {
          console.log(res.data);
          window.open(routeUrl.href, '_blank');
        });
      },
      handleSelect(item) {
        this.activeIndex = item;
        this.getMusicListForType(item);
        this.musicList.music = this.musicListForType;
        let musicAllList = this.musicAllList;
        for (let i = 0; i < musicAllList.length; i++) {
          if (item === musicAllList[i].rankId) {
            this.musicList.rankName = musicAllList[i].rankName;
            this.musicList.addTime = musicAllList[i].addTime;
            this.musicList.intro = musicAllList[i].intro;
            this.musicList.playTimes = musicAllList[i].playTimes;
          }
        }
      },
      //获取每个榜单音乐
      getMusicListForType(item) {
        this.loading = true;
        this.$axios({
          method: 'get',
          url: '/kugou/musicListV2/' + item + '/' + sessionStorage.getItem("token"),
          dataType: 'json'
        }).then(res => {
          console.log(res.data.data.info);
          this.musicListForType = res.data.data.info;
          //将时间转化为分秒
          const list = this.musicListForType;
          for (let i = 0; i < this.musicListForType.length; i++) {
            let musicLength = (list[i].timeLength) / 1000;
            let min = Math.floor(musicLength / 60);
            let second = Math.floor(musicLength - (min * 60));
            if (second < 10) {
              second = '0' + second;
            }
            list[i].timeLength = min + ':' + second;
          }
          this.loading = false;
        })
      },
      getMusicAllList() {
        this.$axios({
          method: 'get',
          url: '/kugou/musicList/getAllList',
          dataType: 'json',
        }).then(res => {
          console.log(res.data.data.info);
          this.musicAllList = res.data.data.info;
          const list = this.musicAllList;
          for (let i = 0; i < this.musicAllList.length; i++) {
            list[i].rankId = list[i].rankId.toString();
          }
          this.musicAllList = list;
          this.getMusicListForType(this.musicAllList[0].rankId);
          this.musicList.rankName = this.musicAllList[0].rankName;
          this.musicList.addTime = this.musicAllList[0].addTime;
          this.musicList.intro = this.musicAllList[0].intro;
          this.musicList.playTimes = this.musicAllList[0].playTimes;

        })
      },
    }
  }
</script>

<style scoped>
  .musicBody {
    width: 1000px;
    margin: 0 auto;
  }
</style>
